body{
    margin: 0;
    padding: 0;
    font-family: Cambria, Georgia, serif;
    font-size: 62.5%;
}

a {
    text-decoration: none;
}

a:hover{
    text-decoration: none;
}

#geral{
    padding: 0px;
    width: 1000px;
    height: 580px;
    margin: 0px auto;
    background: url("../img/fundo.png");
}
#cabecalho {
    background-color: #F0A0BD; width: 100%; height: 0.7%;
}
.logo {
    width: 21%;
    float: left;
    margin-left: 3%;
    margin-top: 1%;
    margin-bottom: 0.5%;
}

.reativar a{
    float: rigth;
    margin-right: 3%;
    color: #333;
}

/* ---------------------------------- Inicio Login ------------------------------*/

.error{
    margin: 1% 0 0 0;
    margin-left: 25%;
    padding: 0;

}

#login {
    width: 50%;
    height: 10%;
    float: right;
    margin: 1% 0 3.5% 0;
    font-size: 1.4em;

}

.corpoLogin{
    width: 95%;
    background-color: #90D3D9;
    height: 100%;
    margin: -2% 0 0 0;
    padding:2% 0 0 2%;


}
.formLogin{
    width: 95%;
    margin-top: -10%;
    margin-left: 1%;
}


#login input {
    border: solid 1px #0096d6;
    font-size: 1.0em;
}

#login input[type=submit] {
    background: #0096d6;
    color: #FFF;
    font-weight: bold;
    font-size: 0.9em;
}

/* ---------------------------------- Fim do Login ------------------------------*/

/* ---------------------------------- Inicio Logon ------------------------------*/

#logon {
    width: 40%;
    height: 10%;
    float:right;
    margin: 1% 0 3.5% 0;
    border: solid 1px #0096d6;
}


/* ---------------------------------- Fim do Logon ------------------------------*/

/* ---------------------------------- Inicio Menu ------------------------------*/
#menu {
    clear: both;
    width: 100%;
    background: #E7E7E7;
    height: 13%;
    list-style: none;
    margin-bottom: 3.5%;
}

#menuItens1{
    width: 550px;
}

#menuItens2{
    width: 550px;
}

#menuItens3{
    width:80%;
}

.menuItens{
    padding: 0;
    height: 70px;
    margin: 8% auto 3% auto ;
    list-style:none;
}
.menuItens li{
    float: left;
}
.menuItens li a{
    display: block;
    width: 106px;
    height: 70px;
    margin: 0 2px;
    outline: none;
    background: transparent url("../img/icons.png") no-repeat top left;
    text-indent: -9000px;
    position: relative;
}
.menuItens li .iconHome{
    background-position: 0px 0px;
}
.menuItens li .iconSobre{
    background-position: -106px 0px;
}

.menuItens li .iconCadastro{
    background-position: -212px 0px;
}
.menuItens li .iconPerfil{
    background-position: -318px 0px;
}
.menuItens li .iconHistorico{
    background-position: -424px 0px;
}
.menuItens li .iconPersonaliza{
    background-position: -530px 0px;
}
.menuItens li .iconReativar{
    background-position: -636px 0px;
}
.menuItens li .iconContato{
    background-position: -742px 0px;
}
.menuItens li a span{
    width: 120px;
    height: auto;
    line-height: 20px;
    padding: 0px;
    left: 50%;
    margin-left: -64px;
    font-family: Cambria, Georgia, serif;
    font-weight:bold;      
    font-style: italic;
    font-size: 1.4em;
    color: #000;
    text-align: center;
    border: 2px solid #0096d6;
    background: rgba(255,255,255,0.3);
    text-indent: 0px;
    border-radius: 5px;
    position: absolute;
    pointer-events: none;
    bottom: 100px;
    opacity: 0;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.menuItens li a span:before,
.menuItens li a span:after{
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    margin-left: -9px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(0,0,0,0.1);
}
.menuItens li a span:after{
    bottom: -10px;
    margin-left: -10px;
    border-top: 10px solid #0096d6;
}
.menuItens li a:hover span{
    opacity: 0.9;
    bottom: 70px;
}

.menuOculta{
    display:none;
}


/* ---------------------------------- Fim do Menu ------------------------------*/


#barraConteudo{
    clear: both;
    width: 100%;
    background: #90D3D9;
    height: 4%;
    margin: 0 0 0 0;
    padding:0;
}

.barraHistorico{
    width: 30%;
    height: 103%;
    background: #FFF;
    margin-top:-3%;
    margin-left:3%;
    -webkit-transform: skew(45deg);
    -moz-transform: skew(45deg);
    -ms-transform: skew(45deg);
    -o-transform: skew(45deg);
    transform: skew(45deg);
}

.barraHistorico p{
    margin-left:30%;
    font-size: 1.6em;
    -webkit-transform: skew(-45deg);
    -moz-transform: skew(-45deg);
    -ms-transform: skew(-45deg);
    -o-transform: skew(-45deg);
    transform: skew(-45deg);
}

.barraBuscar{
    width: 40%;
    height: 103%;
    background: #FFF;
    margin-top:-2.4%;
    margin-right:2%;
    float:right;
    -webkit-transform: skew(45deg);
    -moz-transform: skew(45deg);
    -ms-transform: skew(45deg);
    -o-transform: skew(45deg);
    transform: skew(45deg);
}

.barraBuscar p{
    margin-left:3%;
    font-size: 1.6em;
    margin-top:0;
    -webkit-transform: skew(-45deg);
    -moz-transform: skew(-45deg);
    -ms-transform: skew(-45deg);
    -o-transform: skew(-45deg);
    transform: skew(-45deg);
}

.formBusca{
    margin-left:17%;
    font-size: 1.6em;
    margin-top:-9%;
    -webkit-transform: skew(-45deg);
    -moz-transform: skew(-45deg);
    -ms-transform: skew(-45deg);
    -o-transform: skew(-45deg);
    transform: skew(-45deg);
}

.formLogin label{
    float:left;
    text-align:right;
    margin-right:1%;
    line-height:26px;
    color:#333;
    text-shadow:1px 1px 1px #fff;
    font-weight:bold;
}

.formLogin input{
    background: #fff;
    border: 1px solid #ddd;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    outline: none;
    padding: 0.5%;
    float:left;
    margin-right:2%;
}

.btnLogoff{
    border:none;
    outline:none;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    color: #fff;
    cursor:pointer;
    margin: 0px auto;
    clear:both;
    padding: 0.2% 2%;
    text-shadow: 0 1px 1px #777;
    font-weight:bold;
    font-family:Cambria, Georgia, serif;
    font-size: 1.1em;
    background:#0096D6;
    text-decoration: none;
}

.formLogin button, .formBusca button, .btnLogoff{
    border:none;
    outline:none;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    color: #fff;
    cursor:pointer;
    margin: 0px auto;
    clear:both;
    padding: 0.2% 2%;
    text-shadow: 0 1px 1px #777;
    font-weight:bold;
    font-family:Cambria, Georgia, serif;
    font-size: 1.1em;
    background:#0096D6;

}
.formLogin button:hover, .formBusca button:hover, .btnLogoff:hover{
    background:#FFF;
    color:#0096D6;
    text-shadow:1px 1px 1px #C6E2F7;
}

.formBusca select, .formBusca input{
    background: #fff;
    border: 1px solid #ddd;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    outline: none;
    padding: 1%;
    float:left;
    margin-right:2%;
}

.conteudo {
    clear: both;
    width: 100%;
}



/******* MEDIA QUERIES *******/
/* for 1280px or less */
@media screen and (max-width: 1280px) {

    #geral{
        width: 1280px;
        height:100%;
    }
    #logo {
        width: auto;
        float: none;
        margin-left: 10%;
        text-align:center;
    }
    #login {
        width: 35%;
        height: 40%;
        float: right;
        margin-top: 2%;
        margin-right: 20%;
        font-size: 1.4em;
        background-color: #90D3D9;
    }

    .corpoLogin{
        width: 98%;
        height: 20%;
        margin: 7% 0 0 0;
        margin-bottom: 3%;
        padding: 2% 0 0 2%;
    }

    #menu {
        width: 1280px;
        float: none;
    }

    .barraHistorico{
        width: 20%;
        margin-left:12%;  
    }

    .barraHistorico p{
        margin-left:12%;

    }
    #conteudo {
        width: 1280px;
        float: none;
    }

}

/******* MEDIA QUERIES *******/
/* for 1024px or less */
@media screen and (max-width: 1024px) {

    #geral{
        width: 1000px;
        height:100%;
    }
    #logo {
        width: auto;
        float: none;
        margin-left: 2%;
        text-align:center;
    }
    #login {
        width: 50%;
        height: 40%;
        float: right;
        margin-top: 2%;
        margin-right: 5%;
        font-size: 1.4em;
        background-color: #90D3D9;
    }

    .corpoLogin{
        width: 98%;
        height: 20%;
        margin: 7% 0 0 0;
        margin-bottom: 3%;
        padding: 2% 0 0 2%;
    }

    #menu {
        width: 1000px;
        float: none;
    }

    .barraHistorico{
        width: 30%;
        margin-left:2%;  
    }

    .barraHistorico p{
        margin-left:25%;

    }
    #conteudo {
        width: 1000px;
        float: none;
    }

}

/* for 800px or less */
@media screen and (max-width: 800px) {

    #geral{
        width: 800px;
        height:100%;
    }
    #logo {
        width: auto;
        float: none;
        margin-left: 2%;
        text-align:center;
    }
    #login {
        width: 60%;
        height: 40%;
        float: right;
        margin-top: 2%;
        margin-right: 2%;
        font-size: 1.4em;
        background-color: #90D3D9;
    }

    .corpoLogin{
        width: 98%;
        height: 20%;
        margin: 7% 0 0 0;
        margin-bottom: 3%;
        padding: 2% 0 0 2%;
    }

    #menu {
        width: 800px;
        float: none;
    }

    .barraHistorico{
        width: 30%;
        margin-left:2%;  
    }

    .barraHistorico p{
        margin-left:25%;

    }
    #conteudo {
        width: 800px;
        float: none;
    }

}

/* for 768px or less */
@media screen and (max-width: 768px) {

    #geral{
        width: 768px;
        height:100%;
    }
    #logo {
        width: auto;
        float: none;
        margin-left: 2%;
        text-align:center;
    }
    #login {
        width: 60%;
        height: 40%;
        float: right;
        margin-top: 2%;
        margin-right: 2%;
        font-size: 1.4em;
        background-color: #90D3D9;
    }

    .corpoLogin{
        width: 98%;
        height: 20%;
        margin: 7% 0 0 0;
        margin-bottom: 3%;
        padding: 2% 0 0 2%;
    }

    #menu {
        width: 768px;
        float: none;
    }

    .barraHistorico{
        width: 30%;
        margin-left:2%;  
    }

    .barraHistorico p{
        margin-left:25%;

    }
    #conteudo {
        width: 768px;
        float: none;
    }

}

/* for 360px or less */
@media screen and (max-width: 360px) {

    #geral{
        width: 360px;
        height:100%;
    }
    #logo{
        margin: 0%;
        float:none;
        text-align:center;
    }

    #logo img{
        width: 60%;
        margin: 0%;
        float:none;
    }

    #login {
        width: 60%;
        height: 40%;
        float: none;
        margin-top: 3%;
        margin-left: 20%;
        margin-right: 2%;
        font-size: 1.4em;
        background-color: #90D3D9;
    }

    .corpoLogin{
        width: 98%;
        height: 20%;
        margin: 7% 0 0 0;
        margin-bottom: 3%;
        padding: 2% 0 0 2%;
    }

    #menu {
        width: 360px;
        float: none;
        background: none;
        margin-left: 10%;
    }

    #menuItens1{
        width: 300px;
    }

    #menuItens2{
        width: 300px;
    }


    .barraHistorico{
        width: 70%;
        margin-left:15%;  
    }

    .barraHistorico p{
        margin-left:10%;

    }
    #conteudo {
        width: 360px;
        float: none;
    }

}
